<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <link rel="stylesheet" href="./components/MySwitch.css">
    <style>
        .box{
            display: flex;
            flex-flow: row nowrap;
            width: 150px;
        }
        .box>div{
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>flag:{{ flag }}</p>
        <input type="checkbox" true-value="是" false-value="否" v-model="flag"> <br>
        <model-switch true-value="是" false-value="否" v-model="flag"></model-switch>

        <model-switch true-value="是" false-value="否" :model-value="flag"></model-switch>


        <hr>

        <p>arr:{{ arr }}</p>
        <div class="box">
            <div>
                A<input type="checkbox" value="A" v-model="arr"> <br>
                B<input type="checkbox" value="B" v-model="arr"> <br>
                C<input type="checkbox" value="C" v-model="arr"> <br>
                D<input type="checkbox" value="D" v-model="arr"> <br>
            </div>
            <div>
                A <model-switch value="A" v-model="arr"></model-switch> <br>
                B <model-switch value="B" v-model="arr"></model-switch> <br>
                C <model-switch value="C" v-model="arr"></model-switch> <br>
                D <model-switch value="D" v-model="arr"></model-switch> <br>
            </div>
        </div>

    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import ModelSwitch from "./components/ModelSwitch.js";
        createApp({
            components: {
                ModelSwitch,
            },
            data(){
                return {
                    // flag:true,
                    flag:"是",
                    //    arr:["A","D"]
                    arr:new Set(["A","D"])
                }
            },
            methods: {
                updateFlag( nv ) {
                    this.flag = nv;
                },
                updateArr( nv ){
                    this.arr = nv;
                }
            },
        }).mount("#app");
    </script>
</body>
</html>